<template>
    <MyArticle title="Echarts结合Bmap实现轨迹动效" date="2024年12月10日">
        <div class="_article-content">
            <p>echarts上有相应的例子，地址：<a href="https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-effect" target="_blank">https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-effect</a>，但是这个Demo有问题，在进行放大操作的时候底图渲染会丢失部分瓦片：</p>
            <figure class="common">
                <a class="pswp-img" href="./imgs/01/50107161235.webp" data-pswp-width="1106" data-pswp-height="753" target="_blank">
                    <img class="thumbnail-img" :src="prefix + '50107161235.webp'"/>
                </a>
            </figure>
            <p>问题在于bmap需设置mapStyleV2字段，并且styleJson也需要相应改成v2格式。</p>
            <p>页面需要引入bmap.js和echarts，并申请百度地图ak：</p>
            <pre><code>&lt;script type="text/javascript" src="./js/echarts.min.5.4.3.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="./js/bmap.js"&gt;&lt;/script&gt;
&lt;script src="https://api.map.baidu.com/api?v=3.0&ak={your bmap ak}"&gt;&lt;/script&gt;</code></pre>
            <p>源数据格式：</p>
            <pre><code>const points = [
    {
        "id": 957,
        "startLongitude": "115.38615342666577",
        "startLatitude": "25.52913993506867",
        "locusPath": "[[115.386018,25.52915],[115.386028,25.5292],[115.386018,25.52935],[115.385948,25.52947],[115.385758,25.52967],[115.385778,25.52986],[115.385928,25.53014],[115.386148,25.53032],[115.386618,25.53034],[115.386758,25.53038],[115.386938,25.53054],[115.386988,25.53074],[115.387028,25.53126],[115.387007,25.5315],[115.387147,25.53207],[115.387137,25.53221],[115.387077,25.53229],[115.386817,25.53233],[115.386327,25.53227],[115.386277,25.53229],[115.386127,25.53252],[115.385607,25.53291],[115.385357,25.53306],[115.385417,25.53325],[115.385497,25.53337],[115.385587,25.53342],[115.385847,25.53329],[115.385977,25.53328],[115.386687,25.53344],[115.387557,25.53353],[115.387637,25.53357],[115.387867,25.53389],[115.388787,25.535092],[115.389026,25.535462],[115.389446,25.535673],[115.389536,25.535794],[115.389646,25.536074],[115.389696,25.536134],[115.389866,25.536245],[115.390196,25.536326],[115.390575,25.536537],[115.390825,25.536588],[115.391065,25.536629],[115.391215,25.53669],[115.391964,25.537143],[115.392483,25.537506],[115.392903,25.537719],[115.393163,25.53791],[115.393432,25.538002],[115.393952,25.538405],[115.394371,25.538778],[115.394521,25.539219],[115.39492,25.539942],[115.39497,25.539993],[115.39512,25.540084],[115.395539,25.540227],[115.395779,25.540249],[115.396238,25.540353],[115.396986,25.54027],[115.397366,25.540304],[115.397665,25.540347],[115.398064,25.540521],[115.398862,25.540839],[115.399531,25.541277],[115.39999,25.541662],[115.400459,25.541888],[115.400568,25.541899],[115.401147,25.541836],[115.401536,25.541731],[115.401775,25.541614],[115.401954,25.541587],[115.402692,25.541646],[115.40342,25.541766],[115.403629,25.541869],[115.403899,25.542063],[115.404208,25.542198],[115.404965,25.542279],[115.405095,25.542321],[115.405155,25.542372],[115.405324,25.542654],[115.405484,25.542767],[115.405783,25.542741],[115.406311,25.54259],[115.40666,25.542665],[115.406759,25.542727],[115.406879,25.542909],[115.406969,25.54338],[115.407328,25.543766],[115.407527,25.544189],[115.407627,25.544221],[115.408065,25.544238],[115.408753,25.544549],[115.409141,25.544626],[115.409351,25.544609],[115.411273,25.543992],[115.415755,25.542573],[115.416004,25.542517],[115.416183,25.54247],[115.41674,25.542031],[115.417358,25.541632],[115.417925,25.541382],[115.418164,25.541336],[115.418384,25.54134],[115.418623,25.541395],[115.418872,25.541529],[115.419599,25.541832],[115.419698,25.541934],[115.420744,25.542283],[115.421382,25.542544],[115.422279,25.54299],[115.422558,25.543095],[115.422946,25.543191],[115.423315,25.543218],[115.423405,25.543219],[115.423933,25.543098],[115.424331,25.542845],[115.425725,25.541588],[115.425735,25.541428],[115.425695,25.540857],[115.425546,25.540485],[115.425107,25.539057],[115.424938,25.538345],[115.424928,25.538244],[115.424958,25.538115],[115.425047,25.538036],[115.425187,25.537969],[115.425735,25.537758],[115.426143,25.537834],[115.426482,25.537939],[115.426671,25.537992],[115.426791,25.537974],[115.426791,25.537974],[115.426841,25.537935],[115.42715,25.53764],[115.42715,25.53764],[115.42721,25.537581],[115.428017,25.537793],[115.429313,25.538032],[115.429831,25.538199],[115.43017,25.538294],[115.430728,25.538711],[115.430868,25.538933],[115.430978,25.539315],[115.430978,25.539805],[115.431158,25.540417],[115.431188,25.540998],[115.431237,25.541118],[115.431387,25.54133],[115.431617,25.541573],[115.431716,25.541634],[115.432085,25.541719],[115.432295,25.542012],[115.433133,25.542902],[115.433801,25.543319],[115.434131,25.543713],[115.43429,25.544025],[115.43442,25.544386],[115.4345,25.545067],[115.4346,25.545268],[115.43486,25.545451],[115.435049,25.545573],[115.435339,25.545676],[115.435788,25.54578],[115.436417,25.545856],[115.436596,25.545808],[115.436895,25.54552],[115.436975,25.545481],[115.437524,25.545576],[115.437714,25.545537],[115.437874,25.545458],[115.438263,25.545231],[115.438512,25.544973],[115.438822,25.544725],[115.439281,25.544569],[115.439511,25.5444],[115.43955,25.54428],[115.43964,25.543491],[115.440049,25.542993],[115.440219,25.542574],[115.440329,25.542435],[115.440998,25.541858],[115.441227,25.541769],[115.441487,25.541781],[115.441767,25.541932],[115.441837,25.541942],[115.442117,25.541873],[115.442117,25.541873],[115.440558,25.540966],[115.439939,25.540502],[115.439389,25.539939],[115.438191,25.5386],[115.437921,25.538248],[115.437792,25.537947],[115.437792,25.537687],[115.437921,25.537258],[115.438091,25.53638],[115.438411,25.535452],[115.43867,25.534804],[115.43879,25.534485],[115.439,25.533516],[115.43909,25.532517],[115.43929,25.531928],[115.43938,25.531749],[115.439489,25.53159],[115.439879,25.531292],[115.441128,25.530779],[115.441297,25.53068],[115.441497,25.530471],[115.441687,25.530202],[115.441767,25.530052],[115.441897,25.529593],[115.441987,25.529313],[115.442097,25.529064],[115.442317,25.528734],[115.442467,25.528575],[115.442857,25.528236],[115.443327,25.527768],[115.443447,25.527408],[115.443537,25.526789],[115.443408,25.525818],[115.443158,25.525048],[115.443089,25.524678],[115.443089,25.524248],[115.443169,25.523778],[115.443319,25.523358],[115.443649,25.522759],[115.44373,25.52249],[115.44376,25.52207],[115.44372,25.52178],[115.44364,25.52157],[115.44358,25.521409],[115.443261,25.520439],[115.443212,25.519989],[115.443222,25.519839],[115.443332,25.519389],[115.443683,25.51853],[115.443853,25.518051],[115.443913,25.517671],[115.443924,25.517231],[115.443825,25.515871],[115.443706,25.514251],[115.443497,25.513361],[115.443278,25.51265],[115.442979,25.511989],[115.4426,25.511198],[115.442252,25.510027],[115.442053,25.509177],[115.441954,25.507807],[115.441975,25.506967],[115.441985,25.506527],[115.441926,25.506337],[115.441527,25.505515],[115.441477,25.505355],[115.441179,25.503704],[115.44104,25.503273],[115.440412,25.50203],[115.440192,25.501619],[115.440152,25.501549],[115.439284,25.500704],[115.439115,25.500542],[115.438995,25.500412],[115.438856,25.500171],[115.438736,25.49996],[115.438477,25.499448],[115.438467,25.499418],[115.438407,25.499328],[115.438008,25.498895],[115.4375,25.498421],[115.43724,25.498239],[115.436402,25.497861],[115.436273,25.49776],[115.436193,25.49745],[115.436214,25.49679],[115.436294,25.496611],[115.436673,25.496324],[115.436833,25.496166],[115.436913,25.495986],[115.436883,25.495396],[115.436854,25.495256],[115.436814,25.495096],[115.436704,25.494735],[115.436505,25.494213],[115.436456,25.493983],[115.436456,25.493983],[115.436486,25.492983],[115.436426,25.492813],[115.436207,25.492651],[115.435559,25.492344],[115.43514,25.4921],[115.43514,25.4921],[115.434551,25.491814],[115.434362,25.491672],[115.434292,25.491541],[115.434203,25.491171],[115.434073,25.490949],[115.433156,25.490189],[115.432897,25.490016],[115.432169,25.489627],[115.43169,25.489241],[115.431531,25.489099],[115.431322,25.488896],[115.430495,25.487936],[115.42914,25.486777],[115.428711,25.486291],[115.428114,25.485262],[115.427307,25.48387],[115.427138,25.483637],[115.426988,25.483455],[115.426988,25.483455],[115.427018,25.483166],[115.427228,25.482909],[115.427437,25.482862],[115.427915,25.483319],[115.428453,25.483997],[115.428862,25.484453],[115.428971,25.484525],[115.429061,25.484636],[115.42942,25.485111],[115.429768,25.485566],[115.429778,25.485576],[115.430127,25.485961],[115.430197,25.486002],[115.430516,25.486166],[115.430785,25.48626],[115.431064,25.486333],[115.431114,25.486334],[115.431233,25.486346],[115.431233,25.486346],[115.431642,25.486301],[115.431832,25.486243],[115.432021,25.486146],[115.432341,25.48587],[115.432401,25.48579],[115.43247,25.485661],[115.43256,25.485462],[115.43261,25.485203],[115.432561,25.484872],[115.432421,25.484301],[115.432431,25.484031],[115.432431,25.484031],[115.432073,25.482867],[115.431196,25.479906],[115.42998,25.475789],[115.42983,25.475157],[115.429721,25.474446],[115.429661,25.473575],[115.429681,25.472985],[115.4297,25.472785],[115.42979,25.472067],[115.42988,25.471648],[115.430149,25.470741],[115.430388,25.470145],[115.430487,25.469936],[115.430687,25.469549],[115.431145,25.468795],[115.431683,25.468092],[115.431843,25.467914],[115.431932,25.467815],[115.432112,25.467637],[115.43274,25.467015],[115.432879,25.466896],[115.434385,25.465583],[115.435292,25.464792],[115.435961,25.464179],[115.43623,25.463911],[115.436619,25.463465],[115.436868,25.463177],[115.437606,25.462073],[115.437995,25.461286],[115.438324,25.460338],[115.438383,25.460179],[115.438503,25.45969],[115.438602,25.45912],[115.438662,25.458541],[115.438671,25.45796],[115.438651,25.45739],[115.438641,25.45728],[115.43854,25.456519],[115.438219,25.455257],[115.437909,25.454284],[115.436958,25.451336],[115.436377,25.44956],[115.436097,25.448617],[115.436047,25.448367],[115.435836,25.447425],[115.435766,25.446784],[115.435735,25.445623],[115.435784,25.444783],[115.435794,25.444764],[115.435863,25.444334],[115.435992,25.443675],[115.436281,25.442668],[115.436619,25.441841],[115.436808,25.441392],[115.437924,25.439051],[115.438562,25.437716],[115.439169,25.436339],[115.439369,25.435771],[115.439618,25.435072],[115.439956,25.433744],[115.440125,25.432785],[115.440145,25.432685],[115.440264,25.431245],[115.440263,25.429695],[115.440282,25.428065],[115.440281,25.426605],[115.440249,25.422994],[115.440249,25.422504],[115.440249,25.420844],[115.440249,25.420114],[115.440238,25.419404],[115.440218,25.418674],[115.440138,25.417524],[115.440098,25.417233],[115.439959,25.416302],[115.439819,25.415662],[115.439779,25.415491],[115.439689,25.415171],[115.439499,25.41455],[115.439459,25.414419],[115.43931,25.413998],[115.43898,25.413106],[115.438491,25.411803],[115.438461,25.411703],[115.438192,25.410971],[115.438062,25.41056],[115.437793,25.409578],[115.437674,25.409007],[115.437664,25.408927],[115.437484,25.407795],[115.437405,25.406715],[115.437395,25.406265],[115.437395,25.406045],[115.437396,25.405615],[115.437446,25.404135],[115.437477,25.403156],[115.437568,25.400717],[115.437589,25.400387],[115.437589,25.400267],[115.43763,25.399148],[115.437722,25.396429],[115.437773,25.395289],[115.437774,25.39377],[115.437764,25.39354],[115.437745,25.39334],[115.437675,25.392599],[115.437626,25.392259],[115.437447,25.391318],[115.437288,25.390686],[115.437268,25.390606],[115.437069,25.389985],[115.43682,25.389293],[115.436561,25.388691],[115.436243,25.388028],[115.436233,25.387998],[115.435934,25.387435],[115.435217,25.386308],[115.434818,25.385764],[115.434659,25.385573],[115.433941,25.384725],[115.432975,25.383764],[115.432925,25.383704],[115.432656,25.38347],[115.432456,25.383308],[115.431978,25.382922],[115.431051,25.382241],[115.430593,25.381945],[115.430314,25.381781],[115.429995,25.381576],[115.429338,25.381187],[115.428919,25.380941],[115.428262,25.380552],[115.427514,25.380101],[115.427007,25.379763],[115.426817,25.37964],[115.4262,25.37919],[115.425782,25.378854],[115.425373,25.378497],[115.424776,25.377918],[115.424716,25.377867],[115.42401,25.377075],[115.423731,25.37673],[115.423413,25.376305],[115.423114,25.37588],[115.422975,25.375658],[115.422826,25.375435],[115.422567,25.374991],[115.422129,25.374133],[115.42192,25.37367],[115.421732,25.373186],[115.421692,25.373066],[115.421563,25.372704],[115.421334,25.37194],[115.421126,25.371086],[115.420947,25.370263],[115.420848,25.369811],[115.420569,25.368487],[115.42051,25.368216],[115.420351,25.367443],[115.420182,25.36667],[115.419874,25.365255],[115.419735,25.364622],[115.419735,25.364602],[115.419695,25.364441],[115.419625,25.36419],[115.419426,25.363487],[115.419188,25.362802],[115.419048,25.36246],[115.418899,25.362117],[115.41878,25.361875],[115.4186,25.361522],[115.418182,25.360774],[115.417684,25.360025],[115.417226,25.359417],[115.417157,25.359336],[115.416559,25.358655],[115.415404,25.357544],[115.414458,25.356707],[115.412276,25.354778],[115.410104,25.35286],[115.409546,25.35237],[115.408799,25.351618],[115.408131,25.350856],[115.408072,25.350785],[115.407384,25.349914],[115.407045,25.349419],[115.406746,25.348964],[115.406437,25.348449],[115.406417,25.348409],[115.406167,25.347975],[115.405918,25.347481],[115.405698,25.347007],[115.405519,25.346605],[115.405479,25.346514],[115.405329,25.346132],[115.405199,25.34578],[115.40515,25.345649],[115.40474,25.344253],[115.40456,25.3434],[115.40448,25.342969],[115.40438,25.342177],[115.40428,25.341025],[115.404188,25.339124],[115.404098,25.338062],[115.403948,25.33714],[115.403727,25.336207],[115.403468,25.335423],[115.403248,25.33485],[115.403178,25.334689],[115.402978,25.334256],[115.402399,25.333198],[115.401969,25.332542],[115.401909,25.332451],[115.40184,25.33235],[115.40165,25.332078],[115.401081,25.33129],[115.400691,25.330745],[115.400342,25.330231],[115.400112,25.329888],[115.400012,25.329747],[115.399832,25.329445],[115.399482,25.328841],[115.399392,25.32865],[115.399183,25.328247],[115.398903,25.327604],[115.398893,25.327574],[115.398693,25.327062],[115.398282,25.325607],[115.398192,25.325176],[115.398091,25.324535],[115.398021,25.323724],[115.398,25.323094],[115.398,25.322733],[115.398059,25.321794],[115.398088,25.321494],[115.398108,25.321364],[115.398207,25.320725],[115.398426,25.319787],[115.398515,25.319468],[115.398555,25.319329],[115.398694,25.31891],[115.398973,25.318163],[115.399341,25.317247],[115.399998,25.315614],[115.400167,25.315186],[115.400307,25.314848],[115.400993,25.313126],[115.401093,25.312867],[115.401212,25.312588],[115.401481,25.311832],[115.401541,25.311642],[115.40168,25.311204],[115.40172,25.311015],[115.401869,25.310426],[115.401998,25.309648],[115.402067,25.308929],[115.402067,25.308809],[115.402106,25.308129],[115.402086,25.307549],[115.402036,25.306908],[115.401986,25.306587],[115.401846,25.305685],[115.401836,25.305645],[115.401526,25.304501],[115.401496,25.304421],[115.401267,25.303708],[115.401267,25.303698],[115.400668,25.302],[115.400538,25.301579],[115.400488,25.301438],[115.400458,25.301318],[115.400328,25.300876],[115.400178,25.300244],[115.400039,25.299393],[115.399999,25.299202],[115.399909,25.298311],[115.399889,25.297801],[115.399899,25.297161],[115.399909,25.296581],[115.399978,25.295672],[115.400048,25.294933],[115.400258,25.292715],[115.400478,25.290498],[115.400768,25.287542],[115.400988,25.285325],[115.401109,25.284106],[115.401179,25.283087],[115.401189,25.283067],[115.40121,25.281438],[115.401171,25.280857],[115.401151,25.280647],[115.401042,25.279856],[115.400803,25.278663],[115.400764,25.278503],[115.400346,25.277178],[115.400187,25.276766],[115.400087,25.276545],[115.399729,25.275761],[115.399091,25.274594],[115.399061,25.274544],[115.398723,25.27403],[115.397965,25.273002],[115.397746,25.27274],[115.397587,25.272538],[115.397078,25.271984],[115.39665,25.27155],[115.396181,25.271136],[115.395732,25.270732],[115.395263,25.270348],[115.394745,25.269964],[115.394705,25.269934],[115.394385,25.269712],[115.393807,25.269328],[115.39215,25.268198],[115.39197,25.268067],[115.39197,25.268067],[115.391661,25.267836],[115.391022,25.267293],[115.390313,25.26658],[115.390273,25.26654],[115.389844,25.266029],[115.389665,25.265788],[115.389405,25.265418],[115.389016,25.264757],[115.388846,25.264467],[115.388368,25.263376],[115.388149,25.262706],[115.387431,25.260595],[115.386713,25.258475],[115.385745,25.255656],[115.385336,25.254577],[115.385027,25.253907],[115.384607,25.253128],[115.384198,25.252509],[115.384098,25.25238],[115.383708,25.251851],[115.383138,25.251192],[115.381588,25.249669],[115.379817,25.247999],[115.379516,25.247721],[115.378375,25.246619],[115.378065,25.246291],[115.377805,25.246023],[115.376593,25.244684],[115.376493,25.244555],[115.375601,25.243473],[115.3749,25.242551],[115.373397,25.240407],[115.372505,25.239218],[115.372305,25.23898],[115.371362,25.237842],[115.369788,25.236133],[115.369086,25.235453],[115.365905,25.232381],[115.363475,25.230031],[115.362903,25.229511],[115.362702,25.229344],[115.360915,25.227845],[115.358937,25.2264],[115.356637,25.224701],[115.355702,25.223848],[115.35527,25.223336],[115.355029,25.22305],[115.354467,25.22219],[115.354135,25.221556],[115.353853,25.220881],[115.353531,25.219836],[115.353451,25.219428],[115.353451,25.219378],[115.353339,25.21848],[115.353215,25.214561],[115.353122,25.211512],[115.35299,25.210044],[115.35296,25.209784],[115.352758,25.208648],[115.352496,25.207592],[115.352133,25.206488],[115.351831,25.205693],[115.350754,25.202901],[115.350724,25.202822],[115.350341,25.201498],[115.35017,25.200721],[115.350049,25.199973],[115.349948,25.199144],[115.349897,25.198165],[115.349906,25.197065],[115.349945,25.196384],[115.350105,25.195151],[115.350265,25.194338],[115.350465,25.193574],[115.350755,25.192619],[115.351176,25.191522],[115.351416,25.191017],[115.351888,25.190059],[115.35271,25.188724],[115.35271,25.188724],[115.353643,25.187458],[115.354235,25.186767],[115.354496,25.186492],[115.355128,25.185841],[115.35593,25.185116],[115.356523,25.184625],[115.357586,25.183826],[115.357586,25.183826],[115.357647,25.183685],[115.35847,25.18305],[115.358771,25.182825],[115.359062,25.18257],[115.359162,25.182398],[115.359282,25.182096],[115.359292,25.181805],[115.359222,25.181247],[115.359242,25.181056],[115.359352,25.180824],[115.359593,25.18052],[115.359784,25.180257],[115.359844,25.180155],[115.359904,25.179934],[115.359874,25.179535],[115.359734,25.179267],[115.359392,25.178923],[115.359332,25.178805],[115.359332,25.178805],[115.358609,25.178277],[115.358579,25.178258],[115.355707,25.17618],[115.352706,25.174003],[115.351983,25.173476],[115.350999,25.172763],[115.349594,25.171747],[115.348772,25.171191],[115.348772,25.171191],[115.348611,25.171164],[115.348149,25.170912],[115.347718,25.170749],[115.347487,25.170702],[115.347447,25.170693],[115.347206,25.170677],[115.346745,25.170744],[115.346233,25.170912],[115.346082,25.170965],[115.345801,25.170989],[115.345651,25.170941],[115.34552,25.170893],[115.3454,25.170795],[115.34535,25.170746],[115.3453,25.170666],[115.34528,25.170577],[115.34522,25.170308],[115.34524,25.170067],[115.34525,25.170037],[115.3454,25.169485],[115.3454,25.169465],[115.345551,25.168883],[115.345692,25.168341],[115.345853,25.167758],[115.345973,25.167177],[115.346094,25.166605],[115.346205,25.166113],[115.346245,25.166002],[115.346456,25.165419],[115.346456,25.165419],[115.346707,25.164945],[115.347129,25.164289],[115.34731,25.164046],[115.347711,25.16359],[115.348575,25.162676],[115.349639,25.161548],[115.34971,25.161477],[115.350021,25.161151],[115.35198,25.159078],[115.352151,25.158905],[115.353829,25.157136],[115.353909,25.157044],[115.355577,25.155294],[115.35623,25.154693],[115.356753,25.154353],[115.357295,25.154084],[115.357697,25.153937],[115.358249,25.153787],[115.358339,25.153765],[115.358661,25.153729],[115.359143,25.153691],[115.359615,25.153702],[115.359966,25.153736],[115.360739,25.153892],[115.362143,25.154428],[115.363047,25.154792],[115.363047,25.154792],[115.363247,25.154769],[115.363448,25.154705],[115.363689,25.154411],[115.364734,25.153104],[115.365006,25.15267],[115.365277,25.152156],[115.365508,25.151492],[115.365801,25.150408],[115.366143,25.149122],[115.366173,25.149052],[115.366173,25.149052],[115.366263,25.14911],[115.366434,25.149158],[115.367698,25.149538],[115.367758,25.149657],[115.367758,25.149857],[115.367606,25.150759]]",
        "endLongitude": "115.36762317079939",
        "endLatitude": "25.150776640005528"
    },
    ...
]</code></pre>
            <p>数据处理：</p>
            <pre><code>const hStep = 300 / (points.length - 1)
const datas = points.map((item, index) => {
    return {
        coords: JSON.parse(item.locusPath),
        lineStyle: {
            normal: {
                color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * index))
            }
        }
    }
})</code></pre>
            <p>echarts设置option如下：</p>
            <pre><code>const option = {
    backgroundColor: 'transparent',
    bmap: {
        center: [115.40886181021229, 25.30142717950327],
        zoom: 11,
        roam: true,
        mapStyleV2: { styleJson: mapStyle }
    },
    series: [
        {
            type: 'lines',
            coordinateSystem: 'bmap',
            polyline: true,
            data: trackDatas,
            silent: true,
            lineStyle: { opacity: 0.2, width: 1 },
            progressiveThreshold: 500,
            progressive: 200
        },
        {
            type: 'lines',
            coordinateSystem: 'bmap',
            polyline: true,
            data: trackDatas,
            lineStyle: { width: 0 },
            effect: { constantSpeed: 20, show: true, trailLength: 0.1, symbolSize: 1.5 },
            zlevel: 1
        },
        {
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            symbolSize: function (params) {
                return (params[2] / 100) * 15 + 5
            },
            itemStyle: {
                color: '#ed7020',
                shadowBlur: 10,
                shadowColor: '#fff'
            },
            label: {
                formatter: '{b}',
                position: 'right',
                show: true,
                fontSize: 15,
                color: '#ed7020',
                fontWeight: 'bold'
            },
            encode: {
                value: 2
            },
            showEffectOn: 'render',
            rippleEffect: { brushType: 'stroke' },
            emphasis: { scale: true },
            data: [
                { name: '物流园', value: [115.36762317079939, 25.150776640005528, 100] }
            ]
        }
    ]
}
chart = echarts.init(containerEl.value)
chart.setOption(option)</code></pre>
            <p>mapStyle.json内容如下，v3格式：</p>
            <pre style="max-height: 400px;overflow-y: auto;"><code>{{ styleData }}</code></pre>
            <p>监听窗口resize，容器大小改变时重绘：</p>
            <pre><code>window.addEventListener('resize', () => {
    setTimeout(() => {
        if (chart) {
            chart.resize()
        }
    }, 250)
})</code></pre>
            <p>重置使地图回到初始位置：</p>
            <pre><code>const doResetMap = () => {
    const bmap = chart.getModel().getComponent('bmap').getBMap()
    bmap.reset()
}</code></pre>
            <p>使行政区域高亮显示：</p>
            <pre><code>const addBoundary = async () => {
    const bmap = chart.getModel().getComponent('bmap').getBMap()
    const boundaryDatas = await fetch('./geoJson/bmapCounty.txt').then(res => res.text())
    const outerPoints = []
    outerPoints.push(new BMap.Point(180, 45))
    outerPoints.push(new BMap.Point(180, 90))
    outerPoints.push(new BMap.Point(-180,  90))
    outerPoints.push(new BMap.Point(-180, 45))
    outerPoints.push(new BMap.Point(-180, -90))
    outerPoints.push(new BMap.Point(180, -90))
    outerPoints.push(new BMap.Point(180, 45))

    let arr = null
    const innerPoints = boundaryDatas.split(';').map(item => {
        arr = item.split(',').map(subItem => subItem - 0)
        return new BMap.Point(arr[0], arr[1])
    })
    innerPoints.push(innerPoints[0])

    const outerPolygon = new BMap.Polygon([...innerPoints, ...outerPoints], {
        fillColor: '#000000', strokeColor: 'transparent', strokeOpacity: 0, fillOpacity: 0.6
    })
    bmap.addOverlay(outerPolygon)

    const innerPolygon = new BMap.Polygon(boundaryDatas, {
        strokeWeight: 2.5, strokeColor: '#F25712', fillColor: 'transparent'
    })
    bmap.addOverlay(innerPolygon)
}</code></pre>
            <p>最终效果：</p>
            <figure class="common">
                <a class="pswp-img" href="./imgs/01/20250107171845.jpg" data-pswp-width="1287" data-pswp-height="818" target="_blank">
                    <img class="thumbnail-img" :src="prefix + '20250107171845.jpg'"/>
                </a>
            </figure>
        </div>
    </MyArticle>
</template>

<script>
import { ref } from 'vue'
import mapStyleJson from './mapStyle.json'

export default {
    setup () {
        const prefix = ref('./imgs/01/')
        const styleData = ref(mapStyleJson)
        return {
            prefix,
            styleData
        }
    }
}
</script>
